<template>
  <div>
    <pt-search
      :params="params"
      :config="config"
      label-width="110px"
      @search="search"/>
    <div class="class-list flex">
      <el-scrollbar class="page-component__scroll"
        wrapClass="pt-menu-scrollbar__view">
       <class-item :params="params" @changeClass="changeClass"  />
      </el-scrollbar>
      <pt-table class="table"
        :params="params"
        :columns="columns"
        :dataSource="tableData"
        :options="options"
        :fetch="getTableList"
        :pagination="pagination">
      </pt-table>
    </div>
  </div>
</template>
<script>
  import * as api from '@/api/sc_goods.js'
  import classItem from './components/classItem'
  import goodsImg from './components/goodsImg'
  export default {
    components: { classItem, goodsImg },
    data() {
      return {
        value:false,
        config: [{ // 搜索
          key: "name", type: "input", label: "商品查询", placeholder: "商品关键字、编号"
        },{
          key: "status", type: "select", label: "商品状态", placeholder: "---商品上架、下架--", 
          option: [{ label: "已上架", id: "0" }, { label: "未上架", id: "1" },
            {label: "回收站", id: "2"}, { label: '已删除', id: '-1'}]
        },{
          key: "page", type: "button",
          group: [
            { name: "查看", type: "primary", onClick: () => { } },
            { name: "重置", type: "info", onClick: () => this.reset()
            },{
              name: "新增商品", type: "primary", plain: true, onClick: () => this.$router.push({
              path:'/main/sc_shop/addGoods',
              query: {bid: this.$route.query.id || '' }
            })
          }]
        }],
        columns: [{ // 表单配置
          label: "商品名称", minWidth: 200, align: "left", render: row => <goods-img item={row} />
        },{
          prop: "type", label: "系统分类", minWidth: 100, align: "center"
        },{
          prop: "shopType", label: "店内分类", minWidth: 100, align: "center"
        },{
          prop: "goodsNum", label: "商品编号", minWidth: 120, align: "center"
        },{ 
          prop: "price", label: "价格", minWidth: 100, align: "center" 
        },{
          label: "状态", minWidth: 100, align: "center", render: row => <span>{this.searchSatus(row.status)}</span>
        },{
          prop: 'sort', label: "排序", minWidth: 80, align: "center"
        },{
          prop: "saleCount",label: "销量", minWidth: 80, align: "center"
        },{
          button: true, label: "操作", minWidth: 180, fixed: "right", align: 'right',
          group: [{
            name: "上架", type: "text", style: { color: '#8BC34A' }, isToggle: true, toggle: row => row.status === 1,
            onClick: row => this.setStatus(0, row.id)
          },{
            name: "下架", type: "text", isToggle: true, toggle: row => row.status === 0,
            onClick: row => this.setStatus(1, row.id)
          },{
            name: "加入回收站", type: "text", isToggle: true, toggle: row => row.status === 1,
            onClick: row =>this.setStatus(2, row.id)
          },{
            name: "恢复", type: "text", style: { color: '#8BC34A' }, isToggle: true, toggle: row => row.status === 2,
            onClick: row => this.setStatus(1, row.id)
          },{
            name: "删除", type: "text", isToggle: true, toggle: row => row.status === 2,
            onClick: row => this.setStatus(-1, row.id)
          },{
            name: "排序", type: "text", style: { color: '#03a9f4' }, onClick: row => this.setSort(row.id)
          },{
            name: "查看", type: "text", style: { color: '#03a9f4' },
            onClick: row => this.$router.push({ path: '/main/sc_shop/addGoods', query: { gid:row.id, bid: row.businessId }}) 
          }]
        }],
        pagination: { total: 0, page: 0, size: 10, curPage: 1 }, // 分页
        options: { // 表单外观
          mutiSelect: false, //  多选则 mutiSelect
          index: false, // 显示序号
          loading: false, // 表格动画
          initTable: true // 是否一挂载就加载数据
        },
        isloadingTable: false,  //表单等待
        params: {
          page: 0,
          size: 10,
          name: '',    //商家名称
          status: '', // 是否已上架，0已上架，1未上架,2在回收站, -1已删除
          shopTypeId: '',  //营业状态
          businessid: '' //区域
        },
        tableData: [], //表单数据
        activeName: '' // tabs切换
      }
    },
    methods: {
      searchSatus(val) { // 状态过滤
        if (val>= 0) {
          const arr = [ '已上架', '已下架', '回收站']
          return arr[val]
        } else {
          return ''
        }
      },
      setStatus(status, goodsId) { // 设置状态
        api.setStatus({status, goodsId: [goodsId]}).then(res => {
          if (res.success) {
            this.getTableList()
            this.$message.success('修改成功！')
          }
        })
      },
      setSort(goodsId) { // 修改排序
        this.$prompt('请输入数字，数字越大越靠前', '排序提示！', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^[1-9]([0-9])*$/,
          inputErrorMessage: '请输入整数'
        }).then(({ value }) => {
          api.setSort({ goodsId, sort: value }).then(res => {
            this.getTableList()
            this.$message.success('修改成功！')
          })
        }).catch(() => {
            
        })
      },
      search() { // 搜索
        this.pagination.curPage = 1
        this.pagination.page = 0
        this.params.shopTypeId = ''
        this.getTableList()
      },
      reset(shopTypeId) { // 重置
        this.pagination.curPage = 1
        for (const key in this.params) {
          if (key === "page") {
            this.pagination.page = 0
          } else if (key === 'size') {
            this.pagination.size = 10
          } else if (key === 'shopTypeId') {
            if (!shopTypeId) this.params[key] = ''
          } else {
            this.params[key] = ''
          }
        }
        this.getTableList()
      },
      changeClass() { // 组件切换分类传过来的事件
        this.reset(true)
      },
      getTableList() {  //获取商家列表
        this.options.loading = true
        if (this.params.name !== '' || this.params.status !== '') {
          this.params.shopTypeId = ''
        }
        const params = { ...this.params }
        params.page = this.pagination.page
        params.size = this.pagination.size
        params.businessid = this.$route.query.id || ''
        api.goodsBusList(params).then(res => {
          if (res.success) {
            this.tableData = res.data.list || []
            this.pagination.total = res.data.total
          }
        }).finally(() => { this.options.loading = false })
      },
      capitalize(t1, t2, t3) {  //过滤分类
        let arr = [t1, t2, t3];
        arr.forEach((item, index) => {
          if (!item) arr.splice(index, 1)
        })
        return arr.length > 0 ? arr.join('、') : ''
      }
    },
    mounted() {
    }
  }
</script>
<style lang="scss" scoped>
  .class-list{
    width: 100%;
    .table{
      width:calc(100% - 160px);
    }
    .page-component__scroll{
      width: 160px;
      height: 600px;
      background: #fff;
      /deep/ .el-scrollbar__wrap{
        overflow-x: hidden;
      }
      /deep/ .el-scrollbar__bar{
        .el-scrollbar__thumb{
          background: rgb(245,198,201);
        }
      }
    }
  }
  .btns-list{
    float: left;
  }
</style>
